<template>
	<div class="index">
		<div>
			<div class="header-wrap">
				<div class="header-text">
					自动化日简报生成
				</div>
				<div class="date-text">
					报表日期：
					<el-date-picker v-model="search_date" date-pickeralign="right" type="date" placeholder="选择日期"
						format="yyyy年MM月dd日" value-format="yyyy年MM月dd日" style="width:170px;">
					</el-date-picker>
				</div>
			</div>
			<el-container>
				<el-main class="main-wrap">
					<!-- // 表格和导出 -->
					<div class="main-content">
						<div>
							<div>
								<!-- // 上部的表 -->
								<div style="margin-top: 0px;">
									<DailyTableView class="left-table" :todayDate="search_date"></DailyTableView>
								</div>
							</div>
						</div>
					</div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script>
	import DailyTableView from "@/views/DailyTableView.vue";
	import {
		DateTime
	} from "@/utils/date.js";
	let date = new DateTime();
	var today = date.getYear() + "年" + date.getMonth() + "月" + date.getDate() + "日";
	export default {
		name: "Index",
		components: {
			DailyTableView
		},
		data() {
			return {
				// 日期选择 方法
				todayDate: today, // 显示今天日期
				search_date: today,
			};
		}
	};
</script>

<style lang="scss" scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.header-nav {
		display: flex;
		height: 100px !important;
		// background-color: #d9001b;
		background: rgb(217, 0, 27);
		background: linear-gradient(45deg,
				rgba(217, 0, 27, 1) 0%,
				rgba(228, 61, 83, 1) 74%);
		width: 100%;
		line-height: 100px;

		.header-text {
			font-size: 32px;
			color: #ffffff;
			font-family: "Microsoft YaHei ";
			font-weight: 700;
			letter-spacing: 50px;
			display: flex;
			justify-content: center;
		}

		.date-text {
			display: flex;
			justify-content: flex-end;
			color: #fff;
			font-weight: 600;
		}
	}

	.header-wrap {
		height: 100px !important;
		background: rgb(217, 0, 27);
		background: linear-gradient(45deg,
				rgba(217, 0, 27, 1) 0%,
				rgba(228, 61, 83, 1) 74%);
		width: 100%;

		.header-text {
			line-height: 100px;
			font-size: 32px;
			color: #ffffff;
			font-family: "Microsoft YaHei ";
			font-weight: 700;
			letter-spacing: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}

		.date-text {
			font-size: 20px;
			color: #fff;
			font-weight: 600;
			position: absolute;
			top: 68px;
			left: 30px;
		}
	}

	.main-wrap {
		.date-text {
			line-height: 38px;
		}

		.query-button {
			margin-left: 8px;
		}

		.important-tex {
			width: 124px;
			line-height: 38px;
		}

		.important-input-wrap {
			display: flex;
			margin-bottom: 10px;

			.important-input {
				width: 190px;
				min-width: 190px;
			}
		}

		.table-wrap {
			.date-tiel {
				text-align: left;
				font-size: 24px;
			}

			.left-table {
				border: 8px solid #f2f2f2;
			}

			.right-table {
				border: 8px solid #f2f2f2;
			}
		}

		.center {
			line-height: 38px;
		}
	}

	.checkbox-group {
		display: flex;
		flex-direction: column;
	}

	.checkbox-button-row {
		padding-left: 20px;
	}

	.check-line-wrap {
		display: flex;
	}

	.down-group {
		line-height: 80px;
		cursor: pointer;
		display: flex;
		flex-direction: column;

		a {
			text-decoration: none;
			outline: 0 none;
		}

		.disable-a {
			pointer-events: none;
			color: #afafaf;
			cursor: default;
		}
	}

	.date-table-tiel {
		text-align: center;
		font-size: 24px;
	}

	.buzy-server {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500 px !important;
		font-size: 28px;
		margin-top: 200 px;
	}

	.zip-down {
		text-decoration: none;
		display: inline-block;
		color: #409eff;
		margin-left: 20px;
	}

	@media screen and (max-width: 1860px) {
		.hidden-1860 {
			display: none;
		}
	}

	.main-content {
		display: flex;
		justify-content: center;
		margin-top: 40px;

		.table-content {
			width: 1200px;

			.table-text {
				display: flex;
				justify-content: center;
				font-size: 24px;
				font-weight: 700;
			}

			.table-for-two {
				display: flex;
				justify-content: space-between;

				.left-table {
					border: 8px solid #e7e7e7;
				}

				.left-top-hint-text {
					border: 8px solid #e7e7e7;
					border: 8px solid #e7e7e7;
					width: 516px;
					height: 200px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.right-top-hint-text {
					display: flex;
					border: 8px solid #e7e7e7;
					width: 516px;
					height: 200px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.right-table {
					border: 8px solid #e7e7e7;
				}
			}

			.hint-text {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 500px !important;
				font-size: 28px;
				margin-top: 200 px;
			}

			.right-bottom-wrap {
				float: right;

				.right-bottom-table {
					border: 8px solid #e7e7e7;
				}

				.right-bottom-hint-text {
					border: 8px solid #e7e7e7;
					width: 516px;
					height: 200px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: -77px;
				}

				.right-bom-margin {
					margin-top: -76px;
				}

				.right-bom-dynamic-margin {
					margin-top: 76px;
				}

				.right-bom-dynamic-hint {
					margin-top: 50px;
				}
			}
		}

		.choose-content {
			width: 400px;

			.choose-title {
				display: flex;
				justify-content: flex-end;
				font-size: 24px;
				font-weight: 700;
			}

			.choose-wrap {
				display: flex;
				justify-content: flex-end;
				margin-top: 48px;

				.down-wrap {
					display: flex;
					flex-direction: column;
					// margin-top: 28 px;
					font-size: 17px;

					a {
						line-height: 80px !important;
						font-size: 17px;
					}

					.disable-a {
						pointer-events: none;
						color: #afafaf;
						cursor: default;
					}
				}
			}

			.choose-button-row {
				display: flex;
				justify-content: flex-end;
				margin-top: 32px;

				a {
					line-height: 32px;
				}

				.zip-down-all {
					text-decoration: none;
					display: inline-block;
					color: #409eff;
					margin-left: 20px;
				}
			}
		}
	}
</style>
